<template>
  <div style="display: flex; align-items: center">
    <el-icon @click="leftRoute" :style="iconLeftStyle" class="navigator_1"
      ><ArrowLeft
    /></el-icon>
    <el-icon @click="rightRoute" :style="iconRightStyle" class="navigator_1"
      ><ArrowRight
    /></el-icon>
    <div>
      <span @click="handlerClick" class="folder_class">{{ path }}</span>
      <span
        v-if="!allFiles"
        @click="handlerClick"
        class="folder_class"
        v-for="(item, index) in spans"
        :key="index"
      >
        > {{ item }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, defineEmits } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import store from "@/store";
const path = ref("全部文件");
const allFiles = ref(false);
// const spans = ref([]);

const spans = computed(() => {
  const data = store.getters.getBackTop;
  const arr = data.split("/");
  arr.length = arr.length - 1;
  return arr;
});

// const rootPath = computed(() => {
//   return store.getters.getPath;
// });

// watch(rootPath, (newVal) => {
//   allFiles.value = newVal == "/" ? true : false;
//   const arr = newVal.split("/");
//   spans.value = [];
//   for (let index = 0; index < arr.length; index++) {
//     const element = arr[index];
//     if (element) {
//       spans.value.push(element);
//     }
//   }
// });

// 定义 emit
const emit = defineEmits();

const props = defineProps({
  path: { type: String, default: "全部文件" },
});
//控制左右箭头的伪类，当其为true时，左右箭头上添加伪类，光标变成小手且字体颜色改变
const leftArrowHover = ref(false);
const rightArrowHover = ref(false);
// const iconLeft = ref("#AAAAAA"); // 设置颜色为灰色，可以根据需要动态改变
// const iconRight = ref("#AAAAAA"); // 设置颜色为灰色，可以根据需要动态改变

const iconLeftStyle = computed(() => {
  const color = store.getters.getBackSize == 0 ? "#AAAAAA" : "#000000";
  leftArrowHover.value = store.getters.getBackSize == 0 ? false : true;
  return { color }; // 返回一个包含颜色和光标样式的对象
});

const iconRightStyle = computed(() => {
  const color = store.getters.getForwardSize == 0 ? "#AAAAAA" : "#000000";
  rightArrowHover.value = store.getters.getForwardSize == 0 ? false : true;
  return { color };
});

const leftRoute = async () => {
  if (leftArrowHover.value) {
    store.commit("goBack");
    emit("update");
  }
};

const rightRoute = () => {
  if (rightArrowHover.value) {
    store.commit("goForward");
    emit("update");
  }
};

const handlerClick = (event) => {
  let clickedContent = event.target.innerText;
  clickedContent = clickedContent.trim();
  if (clickedContent.startsWith(">")) {
    clickedContent = clickedContent.substring(1, clickedContent.length);
  }
  clickedContent = clickedContent.trim();
  //如果点击的就是当前路径则不跳转或现在已经是首页了也不跳转
  if (clickedContent == spans.value[spans.value.length - 1]||!spans.value[spans.value.length - 1]) {
    return;
  }
  let path = "";
  if (clickedContent != "全部文件") {
    //拼接成目录，调用folder的enterFolder方法
    for (let index = 0; index < spans.value.length; index++) {
      const element = spans.value[index];
      path = path + element + "/";
      if (element == clickedContent) {
        break;
      }
    }
    store.commit("setBackStack", path);
    emit("update", path);
  } else {
    if (leftArrowHover || rightArrowHover) {
      store.commit("setBackStack", path);
      emit("update", path);
    }
  }
};
</script>

<style scoped>
.navigator_1 {
  margin-left: 10px;
}
.folder_class {
  font-size: 12px;
  margin-left: 2px;
}
.folder_class:hover {
  cursor: pointer;
  color: #009fcc;
}
</style>
